<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" class="tabel-form">
      <div>
        <el-form-item label="店铺名" prop="shopName">
          <el-input v-model="queryParams.shopName" placeholder="请输入店铺名" clearable min-width="150" />
        </el-form-item>
        <el-form-item label="申请时间" prop="userName">
          <el-date-picker value-format="yyyy-MM-dd" v-model="value1" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
    
        <el-form-item label="审核时间" prop="userName">
          <el-date-picker value-format="yyyy-MM-dd" v-model="value2" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="queryParams.orderStatus" clearable min-width="250">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="余额" prop="userName">
          <div style="width: 380px;display: flex;">
            <el-input v-model="queryParams.balanceStart" type="number" placeholder="余额范围下限" clearable min-width="100" />
            <span style="padding: 0 10px;">到</span>
            <el-input v-model="queryParams.balanceEnd" type="number" placeholder="余额范围上限" clearable min-width="100" />
          </div>
        </el-form-item>
        <el-form-item label="用户直推" style="margin-right: 40px;">
         
          <el-input v-model="queryParams.userDirectPush" placeholder="请输入用户名" clearable min-width="150" />

        </el-form-item>
        <el-form-item label="用户三代" style="margin-right: 40px;">
          <el-input v-model="queryParams.user3rdGeneration" placeholder="请输入用户名" clearable min-width="150" />

        </el-form-item>
        <el-form-item label="用户伞下" style="margin-right: 40px;">
  
          <el-input v-model="queryParams.userUnderUmbrella" placeholder="请输入用户名" clearable min-width="150" />

        </el-form-item>
        <el-form-item label="提现次数" prop="withdrawalsNum">
          <el-input v-model="queryParams.wlNumMin" type="number" placeholder="最小提现次数" clearable style="width: 160px;" />
            <span style="padding: 0 10px;">到</span>
            <el-input v-model="queryParams.wlNumMax" type="number" placeholder="最大提现次数" clearable style="width: 160px;" />
        </el-form-item>
        <el-form-item label="提现地址" prop="trcAddress">
          <el-input v-model="queryParams.accountNumber" placeholder="请输入提现地址" clearable min-width="250" />
        </el-form-item>
  
        <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
          <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;">
            <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </div>
    </el-form>
    <el-table :show-overflow-tooltip='true' v-loading="loading" :data="withdrawalList" border>
      <el-table-column label="店铺信息" min-width="220" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              店铺名：{{ scope.row.shopName }}
            </div>
            <div>
              店铺Uid：{{ scope.row.shopCode }}
            </div>

            <div>
              代理线名称：{{ scope.row.agentAccount }}
            </div>
            <div>
              会员层级：{{ scope.row.storey }}
            </div>
            <div>
              提现金额：{{ scope.row.amount }}
            </div>
            <div>
              提现前金额：{{ scope.row.amountBeforeChange }}
            </div>
            <div>
              提现通道：{{ scope.row.withdrawalChannel }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="下级人数" min-width="180" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              直推人数：{{ scope.row.directNumber }}
            </div>
            <div>
              三代人数：{{ scope.row.lastThreeNum }}
            </div>
            <div>
              伞下人数：{{ scope.row.teamNum }}
            </div>
            <div>
              30天过期数：{{ scope.row.expireRecent }}
            </div>
            <div>
              30天新增数：{{ scope.row.recentAdd }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="金额信息" min-width="180" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              3代/团队充提差：{{ scope.row.lastThreeDifference }}/{{ scope.row.teamDifference }}
            </div>

            <div>
              团队待审核提现：{{ scope.row.teamWaitWithdrawal }}
            </div>
            <div>
              3代复充/提现金额： {{ scope.row.lastThreeGenRecharge }}/{{ scope.row.lastThreeWithdrawal }}
            </div>
            <div>
              3代/团队过期人数： {{ scope.row.expireNumber }}/{{ scope.row.teamExpireNumber }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="提现信息" min-width="240" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              首充天数：
              {{ scope.row.firstChargeDay }}
            </div>
            <div>
              提现次数：{{ scope.row.withdrawalNumber }}
            </div>
            <div>
              同注册IP数：{{ scope.row.sameRegisterIpNum }}
            </div>
           
            <div>
              充值差额：{{ scope.row.difference }}
            </div>
           
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" min-width="230" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              申请日期：{{ $yun.convertTimestamp(scope.row.createDate) }}
            </div>
            <div>
              审核时间：{{ $yun.convertTimestamp(scope.row.auditDate) }}
            </div>
            <div>
              审核状态：
              <span v-if="scope.row.status == 1">未审批</span>
              <span v-if="scope.row.status == 2">审批通过</span>
              <span v-if="scope.row.status == 3">审批未通过</span>
              <span v-if="scope.row.status == 4">客户取消</span>
            </div>
            <div>
              发放状态：
              <span v-if="scope.row.grantStatus == 1">未转账</span>
              <span v-if="scope.row.grantStatus == 2">转账中</span>
              <span v-if="scope.row.grantStatus == 3">已到账</span>
            </div>
            <div>
              上级账号：{{ scope.row.superiorName }}
            </div>
            <div>
              操作人：{{ scope.row.auditUserName }}
            </div>
            <div>
              订单号：{{ scope.row.orderNo }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="备注信息" min-width="350" show-overflow-tooltip align="left">
        <template slot-scope="scope">
          <div>
            <div>
              资料备注：<span style="color: red;">{{ scope.row.profileRemake }}</span>
            </div>
            <div>
              提现备注：<span style="color: red;">{{ scope.row.description }}</span>
            </div>
                       <div>
              提现地址：{{ scope.row.accountNumber }}
            </div>
           
            <div>
              到账金额：{{ scope.row.actualArrivalAmount }}
            </div>
            <div>
              到账时间（小时）： {{ scope.row.withdrawalTime }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('operate')" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">
            <el-button size="mini" type="success" class="mini-btn" plain
              @click="handleFun(scope.row.id, 'pass', scope.row)" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini" class="mini-btn mini-btn-left" type="danger" plain
              @click="handleFun(scope.row.id, 'reject',)" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </span>
          <span v-else>已关闭</span>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['user:withdrawals:remove']"
          >{{$t('delete')}}
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!--    <el-table v-loading="loading" :data="withdrawalList">
      <el-table-column label="订单号" align="center" prop="orderNo" width="200" :show-overflow-tooltip="true" />
      <el-table-column label="店铺名" align="center" prop="shopName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="用户名" align="center" prop="userName" width="120" :show-overflow-tooltip="true" />
      &lt;!&ndash; <el-table-column label="类型 1：充值，2：提现" align="center" prop="type" /> &ndash;&gt;
      <el-table-column label="提现金额" align="center" prop="amount" width="120" :show-overflow-tooltip="true" :formatter="formatterAmount"/>
&lt;!&ndash;      <el-table-column label="实际金额" align="center" prop="actualArrivalAmount" width="120" :show-overflow-tooltip="true" :formatter="formatterActualArrivalAmount"/>&ndash;&gt;
      <el-table-column label="下单时间" align="center" prop="createDate" width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现方式" align="center" prop="payMethod" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="String(scope.row.payMethod)" />
        </template>
      </el-table-column>
      <el-table-column label="通道ID" align="center" prop="" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.store_recharge_withdraw_status" :value="String(scope.row.status)" />
        </template>
      </el-table-column>
       <el-table-column label="完成时间" align="center" prop="auditDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.auditDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
&lt;!&ndash;       <el-table-column label="账户id" align="center" prop="accountId" />
      <el-table-column label="账户账号" align="center" prop="accountNumber" width="120" :show-overflow-tooltip="true" />
       <el-table-column label="账户所属机构" align="center" prop="accountName" />
      <el-table-column label="账户实名" align="center" prop="accountUserName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="审核用户名" align="center" prop="auditUserName" width="120" :show-overflow-tooltip="true" />
       <el-table-column label="备注" align="center" prop="description" />
      <el-table-column label="审核备注" align="center" prop="auditDesc" />
      <el-table-column label="取消备注" align="center" prop="cancelDesc" />
      <el-table-column label="取消时间" align="center" prop="cancelDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.cancelDate, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="冻结id" align="center" prop="freezeId" /> &ndash;&gt;
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-button size="mini" type="success"  class="mini-btn" plain
              @click="handleFun(scope.row.id, 'pass','实际到账金额')" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini" class="mini-btn mini-btn-left" type="danger" plain
              @click="handleFun(scope.row.id, 'reject','拒绝通过填写备注')" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </div>
          <span v-else>已关闭</span>
        </template>
      </el-table-column>
    </el-table>-->

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


  </div>
</template>

<script>
import { getList, auditPass, auditNoPass, auditAjax, shopWithdrawaStatistics } from '@/api/store/recharge'
import DictSelect from "@/components/DictSelect/index.vue";
import Template from '@/views/setting/template/index.vue'
export default {
  name: "Withdrawal",
  components: { Template, DictSelect },
  dicts: ['store_recharge_withdraw_status', 'payment_method'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 店铺充值提现表格数据
      withdrawalList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        storey: null,
        auditStatus: null,
        withdrawalsNum: null,
        balanceStart: null,
        balanceEnd: null,
        withdrawalsAddress: null,
        conditionType: null,
        pushUser: null,
        teamUser: null,
        threeUser: null,
        userName: null,
        shopId: null,
      },
      value1: null,
      value2: null,
      statusList: [{ id: 1, name: '已审核' }, { id: 2, name: '已驳回' }, { id: 3, name: '未审核' }],
      storeyList: [{ id: 1, name: '1层' }, { id: 2, name: '2层' }, { id: 3, name: '3层' }, { id: 4, name: '4层' }, { id: 5, name: '5层' }],
      // 用户伞下
      sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 用户三代
      userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      //用户直推
      pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],

    };
  },
  created() {
    this.queryParams.shopId = this.$route.query.id || null;
    this.getList();
  },
  methods: {
    /** 查询店铺充值提现列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      delete obj.teamUser
      delete obj.threeUser
      delete obj.pushUser
      this.removeNullValues(obj)
      shopWithdrawaStatistics({ ...obj }).then(response => {
        this.withdrawalList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (this.value1) {
        this.queryParams.startOrderDate = new Date(this.value1[0]).getTime();
        this.queryParams.endOrderDate = new Date(this.value1[1]).getTime();
      }else{
        this.queryParams.startOrderDate = '';
        this.queryParams.endOrderDate ='';
      }
      if (this.value2) {
        this.queryParams.startAuditDate = new Date(this.value2[0]).getTime();
        this.queryParams.endAuditDate = new Date(this.value2[1]).getTime();
      }else{
        this.queryParams.startAuditDate = '';
        this.queryParams.endAuditDate = '';
      }
      this.queryParams.pageNum = 1;
      if (this.queryParams.pushUser !== null) this.queryParams.conditionType = 1
      if (this.queryParams.teamUser !== null) this.queryParams.conditionType = 2
      if (this.queryParams.threeUser !== null) this.queryParams.conditionType = 3
      if (this.queryParams.conditionType && !this.queryParams.shopName) return this.$modal.msgError('请输入店铺名')
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startDate: null,
        storey: null,
        auditStatus: null,
        withdrawalsNum: null,
        balanceStart: null,
        balanceEnd: null,
        withdrawalsAddress: null,
        conditionType: null,
        pushUser: null,
        teamUser: null,
        threeUser: null,
        userName: null,
      }
      this.value1 = null;
      this.value2 = null
      this.handleQuery();
    },
    /** 通过 */
    handleFun(id, type, tips) {
      const h = this.$createElement;
      this.$prompt(h('p', null, [h('i', { style: 'color: red' }, '* '),
      h('span', null, type == 'pass' ? '实际到账金额' : '备注')]),
        tips, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入内容'
      }).then(async ({ value }) => {
        let data = null;
        console.log(data)
        let url = null;
        if (type == 'pass') {
          data = { id: id, actualArrivalAmount: value };
          url = "/web/shop/rw/auditPass";
        } else {
          data = { id: id, auditDesc: value };
          url = "/web/shop/rw/auditNoPass";
        }
        await auditAjax(url, data)
        this.$modal.msgSuccess('操作成功');
        this.getList()
      }).catch(() => {

      });
    },
    change1(e) {
      this.queryParams.teamUser = null
      this.queryParams.threeUser = null
      this.queryParams.conditionCode = e
    },
    change2(e) {
      this.queryParams.pushUser = null
      this.queryParams.threeUser = null
      this.queryParams.conditionCode = e
    },
    change3(e) {
      this.queryParams.pushUser = null
      this.queryParams.teamUser = null
      this.queryParams.conditionCode = e
    },
    removeNullValues(obj) {
      for (let key in obj) {
        if (obj[key] === null) {
          delete obj[key];
        }
      }
    }
  }
};
</script>
